<template>
	<view class="login-page">
		<!-- 顶部装饰 -->
		<view class="top-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
		</view>

		<!-- 主内容区 -->
		<view class="login-container">
			<!-- 品牌区域 -->
			<view class="logo-wrapper">
				<view class="logo-circle">
					<image class="logo" src="/static/images/menu1.gif" mode="aspectFit" :lazy-load="true" />
				</view>
				<text class="slogan">品味美食，从这里开始</text>
			</view>

			<!-- 登录表单 -->
			<view class="form-wrapper">
				<text class="form-title">账号登录</text>
				<uni-forms :modelValue="loginForm" class="login-form" validate-trigger="bind">
					<!-- 账号输入 -->
					<uni-forms-item label="账号" class="form-item" label-position="top">
						<uni-easyinput type="text" v-model="loginForm.name" placeholder="3-12位字母/数字" class="input-field"
							:clearable="true" />
					</uni-forms-item>

					<!-- 密码输入 -->
					<uni-forms-item label="密码" class="form-item" label-position="top">
						<uni-easyinput type="password" v-model="loginForm.password" placeholder="6-12位字母/数字"
							class="input-field" :clearable="true" />
					</uni-forms-item>

					<!-- 按钮区 -->
					<view class="btn-group">
						<button class="login-btn" @click="onClickLogin" :loading="isLoading"
							:disabled="isLoading || !canSubmit">
							<text v-if="!isLoading">登录</text>
							<text v-else>登录中...</text>
						</button>

						<view class="divider">
							<view class="divider-line"></view>
							<text class="divider-text">或</text>
							<view class="divider-line"></view>
						</view>

						<button class="register-btn" @click="onClickRegister">新用户注册</button>
					</view>
				</uni-forms>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<text class="copyright">© 2023 美食家 | 让每一餐都有温度</text>
		</view>
	</view>
</template>

<script>
	import * as userAPI from "@/api/user.js"
	import {
		getStorageUser,
		setStorageToken,
		setStorageUser
	} from "@/utils/storage.js"

	export default {
		name: "login",
		data() {
			return {
				loginForm: {
					name: "",
					password: ""
				},
				redirectPath: "",
				isLoading: false,
				regName: /^[a-zA-Z0-9]{3,12}$/,
				regPwd: /^[a-zA-Z0-9]{6,12}$/
			}
		},
		computed: {
			canSubmit() {
				return this.regName.test(this.loginForm.name) && this.regPwd.test(this.loginForm.password)
			}
		},
		onLoad(options) {
			this.redirectPath = options.redirect && decodeURIComponent(options.redirect)
			const storedUser = getStorageUser()
			if (storedUser?.name) this.loginForm.name = storedUser.name
		},
		methods: {
		async onClickLogin() {
		  if (!this.canSubmit) {
		    return;
		  }
		  this.isLoading = true;
		  try {
		    const result = await userAPI.login(this.loginForm);
		    // 1. 验证返回格式（code在根节点，数据在data内）
		    if (result.code !== 200) {
		      throw new Error(result.msg || "登录失败，后端返回非成功状态");
		    }
		    if (!result.data) {
		      throw new Error("接口返回格式异常，缺少data字段");
		    }
		
		    // 2. 从data中提取token和用户信息
		    const { token, id, name, nickname, avatar, phone } = result.data; 
		    if (!token) {
		      throw new Error("后端未返回token");
		    }
		
		    // 3. 存储数据
		    setStorageToken(token);
		    setStorageUser({
		      id: id,
		      name: name,
		      nickname: nickname || name,
		      avatar: avatar || '/static/images/avatar_default.png',
		      phone: phone || '未绑定手机号'
		    });
		    // 4. 跳转
		    const toUrl = this.redirectPath || "/pages/user/user";
		    setTimeout(() => {
		      uni.reLaunch({ url: toUrl });
		    }, 1000);
		
		  } catch (error) {
		    uni.showToast({
		      title: error.message || "登录失败，请重试",
		      icon: "none",
		      duration: 3000
		    });
		  } finally {
		    this.isLoading = false;
		  }
		},
			onClickRegister() {
				uni.navigateTo({
					url: "/pages/user/register"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 主题色定义
	@primary: #ff7d00;
	@primary-light: #ffa040;
	@primary-dark: #e66a00;
	@secondary: #fff9f2;
	@text: #333;
	@lightText: #666;
	@border: #ffe0b2;
	@white: #fff;
	@shadow: rgba(255, 125, 0, 0.15);

	.login-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #fff9f2 0%, #fff 100%);
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	// 顶部装饰
	.top-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		overflow: hidden;
		z-index: 0;
		
		.decoration-circle {
			position: absolute;
			border-radius: 50%;
			background: linear-gradient(135deg, @primary-light, @primary);
			opacity: 0.1;
		}
		
		.circle-1 {
			width: 300rpx;
			height: 300rpx;
			top: -150rpx;
			left: -50rpx;
		}
		
		.circle-2 {
			width: 200rpx;
			height: 200rpx;
			top: -50rpx;
			right: 10%;
			background: linear-gradient(135deg, #ff4081, #ff79a3);
		}
		
		.circle-3 {
			width: 150rpx;
			height: 150rpx;
			top: 50rpx;
			right: 25%;
			background: linear-gradient(135deg, #4caf50, #81c784);
		}
	}

	// 登录容器
	.login-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx 30rpx 100rpx;
		position: relative;
		z-index: 1;
	}

	// Logo区域
	.logo-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
		animation: fadeInUp 0.8s ease-out;

		.logo-circle {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			// background: @white;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 10rpx 30rpx @shadow;
			margin-bottom: 30rpx;
			padding: 20rpx;
			// border: 1rpx solid rgba(255, 125, 0, 0.1);
			animation: breathe 3s ease-in-out infinite;
		}

		.logo {
			width: 100%;
						height: 100%;
						border-radius: 50%; 
						object-fit: cover; 
						display: block;
		}

		.slogan {
			color: @primary;
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 1rpx;
		}
	}

	// 表单容器
	.form-wrapper {
		width: 100%;
		max-width: 600rpx;
		background: @white;
		border-radius: 30rpx;
		padding: 50rpx 40rpx;
		box-shadow: 0 15rpx 40rpx @shadow;
		animation: fadeInUp 0.8s ease-out 0.2s both;
		
		.form-title {
			display: block;
			text-align: center;
			font-size: 40rpx;
			font-weight: 600;
			color: @text;
			margin-bottom: 50rpx;
		}
	}

	// 表单样式
	.login-form {
		.form-item {
			margin-bottom: 40rpx;

			&::v-deep .uni-forms-item__label {
				color: @text;
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 15rpx;
				display: block;
			}

			.input-field {
				&::v-deep .uni-easyinput__input {
					height: 90rpx;
					background: #f9f9f9;
					border: 2rpx solid #f0f0f0;
					border-radius: 20rpx;
					padding: 0 30rpx;
					font-size: 30rpx;
					transition: all 0.3s;

					&:focus {
						border-color: @primary;
						background: #fff;
						box-shadow: 0 0 0 4rpx rgba(255, 125, 0, 0.1);
					}
				}
				
				&::v-deep .uni-easyinput__placeholder {
					color: #aaa;
					font-size: 28rpx;
				}
			}
		}
	}

	// 按钮组
	.btn-group {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
		margin-top: 40rpx;
	}

	.login-btn,
	.register-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		border-radius: 20rpx;
		transition: all 0.3s;
		font-weight: 500;
		position: relative;
		overflow: hidden;
	}

	.login-btn {
		background: linear-gradient(135deg, @primary, @primary-dark);
		color: @white;
		border: none;
		box-shadow: 0 8rpx 20rpx rgba(255, 125, 0, 0.3);

		&:hover,
		&:active {
			transform: translateY(-3rpx);
			box-shadow: 0 12rpx 25rpx rgba(255, 125, 0, 0.4);
		}

		&[disabled] {
			background: #ffcc80;
			transform: none;
			box-shadow: none;
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.3);
			transform: translate(-50%, -50%);
			transition: width 0.3s, height 0.3s;
		}
		
		&:active::after {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.register-btn {
		background: transparent;
		color: @primary;
		border: 2rpx solid @primary;

		&:hover,
		&:active {
			background: rgba(255, 125, 0, 0.05);
			transform: translateY(-2rpx);
		}
	}
	
	// 分割线
	.divider {
		display: flex;
		align-items: center;
		margin: 10rpx 0;
		
		.divider-line {
			flex: 1;
			height: 1rpx;
			background: #eee;
		}
		
		.divider-text {
			padding: 0 30rpx;
			color: #aaa;
			font-size: 26rpx;
		}
	}

	// 底部信息
	.footer {
		padding: 30rpx 0;
		text-align: center;
		position: relative;
		z-index: 1;

		.copyright {
			color: @lightText;
			font-size: 24rpx;
			opacity: 0.8;
		}
	}

	// 动画
	@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: translateY(40rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes float {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-15rpx);
		}
	}

	// 响应式设计
	@media (min-width: 768px) {
		.login-container {
			padding: 60rpx 40rpx 120rpx;
		}
		
		.form-wrapper {
			padding: 60rpx 50rpx;
		}
		
		.logo-wrapper {
			.logo-circle {
				width: 200rpx;
				height: 200rpx;
			}
			
			.logo {
				width: 120rpx;
				height: 120rpx;
			}
			
			.slogan {
				font-size: 34rpx;
			}
		}
	}
	
	// 小屏幕适配
	@media (max-width: 360px) {
		.login-container {
			padding: 30rpx 20rpx 80rpx;
		}
		
		.form-wrapper {
			padding: 40rpx 30rpx;
		}
		
		.logo-wrapper {
			margin-bottom: 40rpx;
			
			.logo-circle {
				width: 150rpx;
				height: 150rpx;
			}
			
			.logo {
				width: 80rpx;
				height: 80rpx;
			}
			
			.slogan {
				font-size: 28rpx;
			}
		}
	}
</style>